<template>
  <div class="app-container">
    <div class="header">
      <p class="screen_box">
        所在行业：<span class="type">主营行业 IT科技 / 互联网|电子商务</span>  ， 副营行业 <span class="type">IT科技 / 电子技术</span> 。
      </p>
      <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit">修改行业</el-button>
      <el-button type="success"  size="mini" @click="getList">更新消息</el-button>
    </div>
    <el-table
      :data="list"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="full_name" label="模板标题"/>
      <el-table-column prop="mobile_code" label="模板编号"/>
      <el-table-column label="添加时间" prop="time"/>
      <el-table-column label="操作" width='220'>
        <template slot-scope="item">
          <el-switch
            v-model="item.row.companystatus"
            :active-value="1"
            :inactive-value="2"
            @change="disOrEnableUsed(item.row)"
            class="elswitch"
          />
          <el-button type="primary" size='mini' icon="el-icon-edit" @click="handleEdit(item.row)"></el-button>
          <el-button type="danger" size='mini' icon="el-icon-delete" @click="handleDelete(item.row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 消息编辑 -->
    <el-dialog title="消息提醒" :visible.sync="formVisible" @close="handleCancel">
      <el-form :ref="formName" :model="formFieldsData">
        <el-form-item label="模板标题:" :label-width="formLabelWidth" prop="name" >
          <el-input type="text" v-model="formFieldsData.desc" style="width: 92%"></el-input>
        </el-form-item>
        <el-form-item label="模板编号:" :label-width="formLabelWidth" prop="code">
          <el-input type="text" v-model="formFieldsData.desc" style="width: 92%"></el-input>
        </el-form-item>
        <el-form-item label="备注:" :label-width="formLabelWidth" prop="desc" >
          <el-input type="textarea" v-model="formFieldsData.desc" style="width: 92%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改行业 -->
    <el-dialog title="修改行业" :visible.sync="formVisible1" @close="hide">
      <el-form :ref="formName1" :model="formFieldsData1">
        <el-select v-model="formFieldsData1.industry1" placeholder="请选择主行业" class="industry_select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="formFieldsData1.industry1" placeholder="请选择副行业">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hide">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      list:[
        {id:1,full_name:'张三',mobile_code:18735365265,value_list:[],post:'司机',source:'',time:'2020-11-17',tuiguang:'aa'}
      ],
      queryParam: {
        page:1,
        pagesize:10
      },
      url:'/member/admin/level/add',
      formName: 'modules',
      formLabelWidth: '120px',
      formFieldsData:{
        title:'',
        code:'',
        desc:'',
        mid:''
      },
      formName1:'editindustry',
      formVisible1:false,
      formFieldsData1:{
        industry1:'',
        industry2:''
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
    }
  },
  methods: {
    // 获取列表
    getList() {
      console.log(this.queryParam)
    },
    // 编辑
    handleEdit(item) {
      this.formFieldsData.mid = item.id
      this.formVisible  = true
    },
    // 开启/关闭
    disOrEnableUsed() {

    },
    // 打开修改行业dialog
    edit() {
      this.formVisible1 = true
    },
    // 修改行业提交
    submit() {

    },
    // 修改行业弹框隐藏
    hide() {
      this.formVisible1 = false
    }
  }
}
</script>
<style>
  .details .el-dialog__body{
    height: 700px;
    overflow-y: auto;
  }
</style>
<style lang="scss" scoped>
  .elswitch{
    margin-right: 10px;
  }
  .header{
    display: flex;
    align-items: center;
    margin-bottom:20px;
  }
  .screen_box{
    font-size: 14px;
    color:#777;
  }
  .type{
    color:#5c90d2;
  }
  .industry_select{
    margin-right: 10px;
  }
</style>